<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			table,tr,td {
				border-collapse: collapse;
			}
			.color_yellow{
				background: yellow;
			}
		</style>
		<script type="text/javascript">
			window.onload = function() {
			//点击按钮后，隔行换色
				var my_btn = document.getElementById("btn");

				my_btn.onclick = function() {
					//通过标签名来获取元素
					var my_tr = document.getElementsByTagName("tr");
					console.log(my_tr);

					for(var i = 0; i <= my_tr.length-1; i++) {
						if(i%2==1){         //偶数行换色
							my_tr[i].className = "color_yellow";
						}
					}
				}
			}
		</script>
	</head>

	<body>
		<input type="button" id="btn" value="点击我" />
		<table border="1">
			<tr>
				<td>1111</td>
				<td>我是内容1</td>
				<td>我是内容1</td>
			</tr>
			<tr>
				<td>2222</td>
				<td>我是内容2</td>
				<td>我是内容2</td>
			</tr>
			<tr>
				<td>3333</td>
				<td>我是内容3</td>
				<td>我是内容3</td>
			</tr>
			<tr>
				<td>4444</td>
				<td>我是内容4</td>
				<td>我是内容4</td>
			</tr>
			<tr>
				<td>5555</td>
				<td>我是内容5</td>
				<td>我是内容5</td>
			</tr>
		</table>
	</body>

</html>